﻿define(function (require, exports, module) {

    require("mixins/global.mixins.js");
    require("andrew/card/index.js");


    require("codemirror/lib/codemirror.js");

    require("codemirror/lib/codemirror.css");
    require("codemirror/theme/monokai.css");

    require("codemirror/mode/htmlmixed/htmlmixed.js");
    require("codemirror/mode/javascript/javascript.js");
    require("codemirror/mode/css/css.js");
    require("codemirror/mode/xml/xml.js");

    require("codemirror/addon/hint/show-hint.css");
    require("codemirror/addon/hint/show-hint.js");

    require("codemirror/addon/hint/html-hint.js");
    require("codemirror/addon/hint/css-hint.js");
    require("codemirror/addon/hint/javascript-hint.js");
    require("codemirror/addon/hint/xml-hint.js");
    require("codemirror/addon/hint/anyword-hint.js");

    require("codemirror/addon/mode/loadmode.js");
    require("codemirror/addon/selection/active-line.js");
    require("codemirror/mode/clike/clike.js");

    require("./index.css");
    var sTpl = require("./index.html");

    var VueComponent = Vue.extend({
        template: sTpl,
        props: {
            "title": {
                default: ''
            },
            "filePath": {
                default: ''
            },
            "collapse": {
                default: false
            },
            "theme": {
                default: 'monokai'
            }
        },
        data: function () {
            return {
                fileTpl: '',
                editor: null
            };
        },
        mounted: function () {
            var me = this;
            var map = {
                html: "text/html",
                js: "text/javascript",
                css: 'text/css',
                conf: "text/javascript"
            };

            var extend = me.filePath.slice(me.filePath.lastIndexOf('.') + 1).toLowerCase();

            $.ajax({
                url: me.filePath,
                success: function (fileTpl) {

                    me.fileTpl = fileTpl;
                    var mod = map[extend] || "htmlmixed";

                    Vue.nextTick(function () {
                        editor = CodeMirror.fromTextArea($(".fileTpl", me.$el).get(0), {
                            mode: mod,
                            lineNumbers: true,
                            styleActiveLine: true,
                            value: me.fileTpl,
                            theme: me.theme,
                        });
                        editor.setOption('value', me.fileTpl);
                        editor.refresh();
                    });
                }
            });
        }
    });

    Vue.component('m-show-code', VueComponent); //都全局注册 同时exports

    module.exports = VueComponent;

});